<template>
    <div class="ask">
        <div class="header">
            <i class="cubeic-back" @click="back"></i>
            <div class="headerTitle">问店铺</div>
            <div class="text" @click="goMyAnswer('/myAnswer')" >我的问答</div>
        </div>
        <div class="goods">
            <div class="box" @click="turn('/detail?id='+extra.goodsId)">
                <img class="img" :src="imgH+extra.img" alt="" />
                <div class="text">
                    <span class="name">{{extra.goodsName}}</span>
                    <span class="content">共{{extra.total}}个问题</span>
                </div>
            </div>
        </div>
        <div v-if="data" class="demo">
            <div class="box">
                <div class="name">{{data.content}}</div>
                <div class="content">
                    <img :src="data.avatar" alt="" />&nbsp;&nbsp;{{data.userName}}&nbsp;&nbsp;
                    <span>提问于{{data.time?data.time.split(" ")[0]:''}}</span>
                </div>
            </div>
            <div class="answer">
                <div class="sum">共{{total}}条回答</div>
                <div v-if="total!=0">
                    <div class="user" v-for="(item,i) in data.list" :key="i">
                        <div class="name"><img :src="imgH+shop.avatar" />{{shop.name}}</div>
                        <div class="info">{{item.content}}</div>
                        <div class="date">{{item.time?item.time.split(" ")[0]:''}}</div>
                    </div>
                </div>
                <div v-if="total ==0" class="main"> <img src="./image/暂无.png" alt=""> </div>
            </div>
        </div>
        <div>
            <div class="footer" v-if="shop.userId==userId && answerCount < 3">
                <input class="input" v-model="inputValue" type="text" placeholder="请输入你对提问者的回复" />
                <div @click="sub()" class="sub">回答</div>
            </div>
            <div  class="footer" v-else>
                <input class="input" type="text" disabled="true" placeholder="请输入你对提问者的回复" />
                <div class="sub" style="background-color: #C8C8C8;">回答</div>
            </div>

        </div>

    </div>
</template>

<script>
    import {queryQuestionId,answer} from "@/api/goods";
    import {mapState} from "vuex"
    export default {
        name : "answer",
        computed: {
            ...mapState({
                "userId":state=>state.user.user.userId
            }),
        },
        data () {
            return {
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                total: 0,
                answerCount: null,
                data: [],
                extra: {},
                shop: {},
                inputValue: ''
            }
        },
        activated(){
            this.total = 0
            queryQuestionId(this.$route.query.queryQuestionId).then(res=>{
                this.data = res.data
                this.extra = res.extra
                this.shop = res.extra.shop
                if (res.data.list){
                    this.total = res.data.list.length
                }
                this.answerCount = res.extra.answerCount
                let after = this.data.userName.charAt(this.data.userName.length-1)
                let first=this.data.userName.substr(0,1)
                this.data.userName = first +"****"+after
            })
        },
        methods:{
            back(){this.$router.go(-1) },
            turn(path){
                this.$router.push(path)
            },
            goMyAnswer(path){
                this.$router.push(path)
            },

            sub(){
                if(this.inputValue.trim().length<5||this.inputValue.trim().length>40){
                    this.showToastTxtOnly()
                    return
                }
                answer(this.$route.query.queryQuestionId,this.inputValue).then(res=>{
                    this.inputValue=''
                    this.success()
                    this.answerCount++;
                }).catch(()=>{
                    this.inputValue=''
                })
            },
            showToastTxtOnly() {
                this.toast = this.$createToast({
                    txt: '请输入5~40个文字',
                    type: 'txt'
                })
                this.toast.show()
            },
            success() {
                this.toast = this.$createToast({
                    txt: '发送成功,最多回答三次',
                    type: 'txt'
                })
                this.toast.show()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .ask
        height 100%
        background-color #F4F3F3
        position relative
        z-index 2
        .header
            padding 0.18rem 0.40rem
            width 9.20rem
            background-color #00D6C0
            display flex
            justify-content space-between
            align-items center
            font-size 0.48rem
            color #fff
            position fixed
            top 0
            left 0
            z-index 999
            color #fff
            background-color: #00d6c0
            .headerTitle
                font-size 17px
            .text
                display inline-block
                color #FEFEFE
                font-szie 14px
                width 40px
                transform scale(0.8)
        .goods
            width 100%
            height 2.61rem
            background-color #fff
            padding 1.3rem 0 15px
            display flex
            justify-content space-around
            .box
                width 9.5rem
                height 1.84rem
                background-color #F4F3F3
                border-radius: 10px;
                display flex
                margin 12px
                align-items center
                padding 7px
                .img
                    display inline-block
                    width 55px
                    height 55px
                    margin-right 0.32rem
                .text
                    display: flex;
                    flex-direction: column;
                    .name
                        display inline-block
                        width 260px
                        overflow hidden
                        text-overflow: -o-ellipsis-lastline;
                        text-overflow: ellipsis;
                        white-space nowrap
                        flex-wrap nowrap
                        color #333
                        font-size 14px
                        margin-bottom: 0.32rem
                    .content
                        color #999
                        font-size 14px
        .demo
            width 100%
            margin-top 12px
            .box
                width 350px
                margin 0 auto
                background-color #F5FEFD
                border-radius: 5px 5px 0 0;
                .name
                    color #333
                    padding 12px 12px 0 12px
                    font-size 13px
                    font-weight bold
                .content
                    color #999
                    font-size 12px
                    padding 12px
                    display flex
                    align-items center
                    img
                        width 16px
                        height 16px
                        display inline-block
                        border-radius 50%
                    span
                        color #ACDDD8
                        font-size 11px
            .answer
                width 350px
                margin 0 auto
                background-color #fff
                box-shadow 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
                .sum
                    color #999
                    font-size 12px
                    padding-top 15px
                    margin-left 10px
                .user
                    padding 15px 7px
                    .name
                        color #999
                        font-size 12px
                        display flex
                        align-items center
                        img
                            display inline-block
                            width 16px
                            height 16px
                            border-radius 50%
                            margin-right 7px
                    .info
                        color #333
                        font-size 13px
                        font-weight 500
                        margin-left 0.6rem
                        margin 13px 0 13px 0.6rem
                    .date
                        color #999
                        font-size 11px
                        margin-left 0.6rem
                .main
                    display flex
                    justify-content space-around
                    img
                        display inline-block
                        width 274px
                        height 150px

        .footer
            width 100%
            height 50px
            background-color #fff
            position fixed
            bottom 0
            left 0
            display flex
            align-items center
            justify-content space-around
            color #fff
            font-size 17px
            .input
                background-color #F4F3F3
                border-radius: 33px;
                width 260px
                height 33px
                padding 0 10px
                outline: none;
            .sub
                width: 74px;
                height: 33px;
                background: #00D6C0;
                border-radius: 33px;
                line-height 33px
                text-align center

        .main
            background-color #ffffff
            width 100%
            height 100%
            margin-top 12px
            img
                display inline-block
                width 100%
                height 270x
</style>
